<template>
  <div class="sc_album">
    <div class="select">
      <!-- <a
        :class="[
          's_item',
          index == 0 ? 'active' : '',
          cate != '分类' ? 'cd' : '',
          isShow == true && index == 0 ? 'show' : '',
        ]"
        @click="tabList(0)"
        >{{ cate }}<van-icon name="arrow-down" class="down" /><van-icon
          name="arrow-up"
          class="up"
      /></a> -->
      <a
        :class="[
          's_item',
          index == 0 ? 'active' : '',
          rel != '排列方式' ? 'cd' : '',
          isShow == true && index == 0 ? 'show' : '',
        ]"
        @click="tabList(0)"
        >{{ rel }}<van-icon name="arrow-down" class="down" />&nbsp;<van-icon
          name="arrow-up"
          class="up"
      /></a>
      <a
        :class="[
          's_item',
          index == 1 ? 'active' : '',
          isfree != '是否付费' ? 'cd' : '',
          isShow == true && index == 1 ? 'show' : '',
        ]"
        @click="tabList(1)"
        >{{ isfree }}<van-icon name="arrow-down" class="down" />&nbsp;<van-icon
          name="arrow-up"
          class="up"
      /></a>
    </div>
    <div class="com" v-if="isShow">
      <div class="select_one">
        <!-- <div class="box_1" v-if="index == 0">
          <span
            v-for="(item, i) in list"
            :key="i"
            :class="[cate == item ? 'active' : '', square == i ? 'active' : '']"
            @click="getCate(item)"
          >
            {{ item }}
          </span>
        </div> -->
        <div class="box_2" v-if="index == 0">
          <div
            class="ty"
            v-for="(ele, i) in relList"
            :key="i"
            :class="[rel == ele ? 'active' : '', square == i ? 'active' : '']"
            @click="getRel(ele)"
          >
            {{ ele }}
          </div>
        </div>
        <div class="box_2" v-if="index == 1">
          <div
            class="ty"
            v-for="(ele, i) in freeList"
            :key="i"
            :class="[
              isfree == ele ? 'active' : '',
              square == i ? 'active' : '',
            ]"
            @click="getFree(ele)"
          >
            {{ ele }}
          </div>
        </div>
      </div>

      <div class="mask" @click="closeCom">
          
      </div>
    </div>


  </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
  data() {
    return {
      list: [
        "全部",
        "相声评书",
        "有声书",
        "历史",
        "人文",
        "情感生活",
        "儿童",
        "娱乐",
        "外语",
        "其他",
        "头条",
        "音乐",
        "商业财经",
        "时尚生活",
      ],
      relList: ["相关性", "最多播放", "最新上传"],
      freeList: ["全部", "免费", "付费"],
      index: -1,
      cate: "分类",
      rel: "排列方式",
      isfree: "是否付费",
      square: 0,
      isShow: false,
    };
  },
  watch:{
      isShow(val){
          if(val){
              document.body.style.position = 'fixed'
              document.body.style.width = '100%'
              
              
          }else{
              document.body.style.position = 'static'
          }
      }
  },
  methods: {
    ...mapMutations(['changeCondition']),
    ...mapMutations(['changeFq']),
    tabList(i) {
      if (this.index == i) {
        if (this.isShow) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
      } else {
        this.isShow = true;
        this.index = i;
      }
    },

    getCate(item) {
      this.isShow = !this.isShow;
      this.square = -1;
      this.cate = item;
    },

    getRel(item) {
      this.isShow = !this.isShow;
      this.square = -1;

      this.rel = item;

      if(this.rel == "相关性"){
        this.changeCondition('relation')
      }else if(this.rel == "最多播放"){
        this.changeCondition('play')
      }else{
        this.changeCondition('recent')
      }
      
    },

    getFree(item) {
      this.isShow = !this.isShow;
      this.square = -1;

      this.isfree = item;

      if(this.isfree == "全部"){
        this.changeFq(" ")
      }else if(this.isfree == "免费"){
        this.changeFq("is_paid:false")
      }else{
        this.changeFq("is_paid:true")
      }
    },

    closeCom(){
        this.index = -1
        this.isShow = false
    }
  },
};
</script>

<style lang="scss" scoped>
.sc_album {
  position: relative;
  .select {
    display: flex;
    height: 40px;
    border-bottom: 1px solid #e8e8e8;
    align-items: center;
    .s_item {
      display: block;
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #a3a3ac;
      line-height: 40px;
      .down {
        display: none;
      }
      .up {
        display: inline-block;
      }
    }
    .s_item:nth-child(2) {
      position: relative;
      &::after,
      &::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 12px;
        background-color: #d1d1d5;
        position: absolute;
      }
      &::after {
        left: 0;
        top: 50%;
        margin-top: -6px;
      }
      &::before {
        right: 0;
        top: 50%;
        margin-top: -6px;
      }
    }
    .s_item.active {
      color: #fe7959;
    }
    .s_item.cd {
      color: #fe7959;
    }
    .s_item.show .up {
      display: none;
    }
    .s_item.show .down {
      display: inline-block;
    }
  }
  .com {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    .select_one {
      width: 100%;
      padding: 0 15px 20px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
      background-color: #fff;
      .box_1 {
        span {
          display: inline-block;
          padding: 5px 15px;
          background-color: #f3f4f5;
          border-radius: 4px;
          font-size: 14px;
          color: #666;
          margin: 15px 15px 0px 0;
        }
        span.active {
          background: rgba(254, 121, 89, 0.1);
          color: #fe7959;
        }
      }

      .box_2 {
        .ty {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          color: #72727b;
        }
        .ty:nth-child(2) {
          border-bottom: 1px solid #e8e8e8;
          border-top: 1px solid #e8e8e8;
        }
        .ty.active {
          color: #fe7959;
        }
      }
    }
    .mask{
        width: 100%;
        height: 100vw;

    }
  }
}

body{
    width: 100%;
}
.t{
    cursor: pointer; top: 0px; left: 0px; right: 0px; position: fixed;
}
</style>

